<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>得票统计</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
		<link rel="stylesheet" href="/static/admin/css/other/console1.css" />
		<!-- 主 题 更 换 -->
		<style id="pearadmin-bg-color"></style>
	</head>
	<body class="pear-container">
		<div>			
			<div class="layui-row layui-col-space10">
				<div class="layui-col-xs6 layui-col-md6">
					<div class="layui-card top-panel">
						<div class="layui-card-header">
                            <span id='riqi'>今</span>日总票数</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
								<div class="layui-col-xs12 layui-col-md12 top-panel-number" style="color: #28333E;" id="value1">
									{$jinripiao}
								</div>
							</div>
						</div>
					</div>
				</div>
                <div class="layui-col-xs6 layui-col-md6">
					<div class="layui-card top-panel">
						<div class="layui-card-header">选择日期</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space5">
                                <div class="layui-col-xs3 layui-col-md3 top-panel-number" style="color: #28333E;">
									
								</div>
								<div class="layui-col-xs6 layui-col-md6 top-panel-number" style="color: #28333E;" id="value2">
									<input type="text" class="layui-input layui-form-danger" name="time" type="text" lay-verify="required"/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-row layui-col-space12">
                <div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header"></div>
						<div class="layui-card-body">
                            <div id="column4" style="min-height:400px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--</div>-->
		<script src="/static/component/layui/layui.js"></script>
		<script src="/static/component/pear/pear.js"></script>
        <script type="text/javascript" src="/static/component/layui_exts/jquery.min.js"></script>
		<script>
			layui.use(['echarts','laydate'], function() {
                let echarts = layui.echarts;
                var column4 = echarts.init(document.getElementById('column4'));

                var shuju = [{$shuju}];

                option = {
                    backgroundColor:'#fff',
                    title:{
                        text:"每两小时得票量",
                        top:10,
                        left:15,
                        textStyle:{
                            color:"#35598d",
                            fontSize:16,
                            fontWeight:'normal'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter:'{b}：{c}',
                    },
                    grid: {
                        left: '5%',
                        right: '6%',
                        bottom: '3%',
                        top: '20%',
                        containLabel: true
                    },
                    xAxis :{
                        type : 'category',
                        data : ['0-2','2-4','4-6','6-8','8-10','10-12','12-14','14-16','16-18','18-20','20-22','22-24'],
                        axisLabel:{          //坐标轴字体颜色
                            textStyle:{
                                color: '#9eaaba'
                            }
                        },
                        axisLine:{
                            lineStyle:{
                                color:"#e5e5e5"
                            }
                        }, 
                        axisTick:{       //y轴刻度线
                        show:false
                        },
                        splitLine:{    //网格
                            show: false,
                        }
                    },
                    yAxis :{
                        type : 'value',
                        axisLabel:{        //坐标轴字体颜色
                            textStyle:{
                                color: '#9eaaba'
                            }
                        },
                        axisLine:{
                            show:false,
                        },
                        axisTick:{       //y轴刻度线
                        show:false
                        },
                        splitLine:{    //网格
                            show: true,
                            lineStyle:{
                                color:'#dadde4',
                                type:"dashed" //坐标网线类型
                            }
                        }
                    },
                    series:{
                        name:'',
                        type:'bar',
                        barWidth : '40%',  //柱子宽度
                        itemStyle:{  //柱子颜色
                            normal:{
                                borderWidth: 2,
                                borderColor: 'rgb(79, 116, 223)',
                                color:'rgba(79, 116, 223, .3)',
                            }
                        },
                        data:shuju
                    }
                };
                column4.setOption(option);
                window.onresize = function() {
                    column4.resize();
                }

                var laydate = layui.laydate;
                var id = {$id};
                //日期时间选择器
                laydate.render({
                    elem: "[name='time']",
                    type: 'date'
                    ,done: function(value, date, endDate){
                        // console.log(value); //得到日期生成的值，如：2017-08-18
                        $.ajax({
                            url:'{$Request.root}/admin.zccandidate/depiaotongjishuju',
                            data:{id:id,data:value},
                            dataType: 'json',
                            type: 'POST',
                            success: function(res) {
                                // console.log(res);
                                $('#value1').html(res.jinripiao);
                                var shuju1 = res.shuju;
                                
                                let echarts = layui.echarts;
                                var column4 = echarts.init(document.getElementById('column4'));

                                option1 = {
                                    backgroundColor:'#fff',
                                    title:{
                                        text:"每两小时得票量",
                                        top:10,
                                        left:15,
                                        textStyle:{
                                            color:"#35598d",
                                            fontSize:16,
                                            fontWeight:'normal'
                                        }
                                    },
                                    tooltip: {
                                        trigger: 'axis',
                                        formatter:'{b}：{c}',
                                    },
                                    grid: {
                                        left: '5%',
                                        right: '6%',
                                        bottom: '3%',
                                        top: '20%',
                                        containLabel: true
                                    },
                                    xAxis :{
                                        type : 'category',
                                        data : ['0-2','2-4','4-6','6-8','8-10','10-12','12-14','14-16','16-18','18-20','20-22','22-24'],
                                        axisLabel:{          //坐标轴字体颜色
                                            textStyle:{
                                                color: '#9eaaba'
                                            }
                                        },
                                        axisLine:{
                                            lineStyle:{
                                                color:"#e5e5e5"
                                            }
                                        }, 
                                        axisTick:{       //y轴刻度线
                                        show:false
                                        },
                                        splitLine:{    //网格
                                            show: false,
                                        }
                                    },
                                    yAxis :{
                                        type : 'value',
                                        axisLabel:{        //坐标轴字体颜色
                                            textStyle:{
                                                color: '#9eaaba'
                                            }
                                        },
                                        axisLine:{
                                            show:false,
                                        },
                                        axisTick:{       //y轴刻度线
                                        show:false
                                        },
                                        splitLine:{    //网格
                                            show: true,
                                            lineStyle:{
                                                color:'#dadde4',
                                                type:"dashed" //坐标网线类型
                                            }
                                        }
                                    },
                                    series:{
                                        name:'',
                                        type:'bar',
                                        barWidth : '40%',  //柱子宽度
                                        itemStyle:{  //柱子颜色
                                            normal:{
                                                borderWidth: 2,
                                                borderColor: 'rgb(79, 116, 223)',
                                                color:'rgba(79, 116, 223, .3)',
                                            }
                                        },
                                        data:shuju1
                                    }
                                };
                                column4.setOption(option1);
                                window.onresize = function() {
                                    column4.resize();
                                }
                            }
                        })
                    }
                });
            })
		</script>
	</body>
</html>
